<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="actc.js"></script>
  <style type="text/css">
td
{
vertical-align:top;
white-space: nowrap;
}
th
{
background-color:green;
color:white;
}
div.button { 
width: 20px; 
float: left;

cursor:pointer;
}
#instructions
{
background-color:green;
color:white;
display:none

}
#showInstructions
{
background-color:green;
color:white;

}
#resetChanges
{
background-color:green;
color:white;
}
td.scedual
{
float:left
}
.button
{
width:25px;
}

</style>
  </head>
  <body>
  <div><button id="showInstructions">View Instructions</button><button id="resetChanges">Reset All Changes</button>
  <div id="instructions">
 
	<h3>All changes made on this page will not affect the original schedule xml.
	<br></br>
	In order to save changes you must copy the generated xml and paste it into the schedule xml
	<br></br>
	Once the changes are saved into the xml file refresh this page to see the changes
	</h3>
	<h4>
	The buttons under the edit column do the following:
	</h4>
 <ul>
  	<li> &#935; : Deletes the row </li>
  	<li> &#8593; : creates a row above the current </li>
  	<li> &#8595; : creates a row below </li>
  </ul> 
  </div>
  </div>
  <table>
  <th><h1>Bus 1</h1></th><th><h1>Bus 2</h1></th><th><button id="genXML">Generate XML</button></th>
  <tr>
  <td>
  <table border="1" class="scedual">
    <tr bgcolor="#9acd32">
      <th>Edit</th>
      <th>Time</th>
      <th>Stop</th>
    </tr>
    <xsl:for-each select="ACTC/Bus1/stop">
    <tr>
    <td><button id="delete" class="button">&#935;</button><button id="oneAbove" class="button" >&#8593;</button><button id="oneBellow" class="button" >&#8595;</button></td>
      <td class="time1"><xsl:value-of select="time"/> am</td>
      <td class="place1"><xsl:value-of select="place"/></td>
    </tr>
    </xsl:for-each>
  </table>
  </td>
  <td>
  <table border="1" class="scedual">
    <tr bgcolor="#9acd32">
     <th>Edit</th>
      <th>Time</th>
      <th>Stop</th>
    </tr>
    <xsl:for-each select="ACTC/Bus2/stop">
    <tr>
      <td><button id="delete" class="button">&#935;</button><button id="oneAbove" class="button" >&#8593;</button><button id="oneBellow" class="button" >&#8595;</button></td>
      <td class="time2"><xsl:value-of select="time"/> am</td>
      <td class="place2"><xsl:value-of select="place"/></td>
    </tr>
    </xsl:for-each>
  </table>
  </td>
  <td id="xmlTD">
  <iframe id="ggeFrame" style="width:500px; height:400px;" frameborder="0" scrolling="No" src="http://www.google.com/ig/ifr?url=gge.xml&amp;synd=open&amp;up_nopreview=1&amp;up_preload_url=http://gadget-doc-examples.googlecode.com/svn/trunk/helloworld.xml"></iframe>  
  <div id="xmlHolder">
  </div>
  </td>
  </tr>
  </table>
  
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>